<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PlantUML渲染测试</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>PlantUML渲染测试</h1>
    <button onclick="testPlantUML()">测试PlantUML渲染</button>
    <div id="result" style="margin-top: 20px; border: 1px solid #ccc; padding: 10px;"></div>

    <script>
        async function testPlantUML() {
            const plantUmlContent = `
            @startuml architecture

            node "API Gateway" as api #lightblue
            node "User Service" as user #lightgreen
            node "Order Service" as order #lightyellow
            node "Database" as db #lightgray

            api --> user : HTTP
            api --> order : HTTP
            user --> db : SQL
            order --> db : SQL

            note right of api : 示例架构图\\n点击节点查看功能

            @enduml
`;

            try {
                // 编码PlantUML内容
                const encodedContent = btoa(unescape(encodeURIComponent(plantUmlContent)));
                const plantUmlUrl = `https://www.plantuml.com/plantuml/svg/${encodedContent}`;

                console.log('PlantUML URL:', plantUmlUrl);

                const response = await axios.get(plantUmlUrl, {
                    timeout: 10000,
                    headers: {
                        'Accept': 'image/svg+xml'
                    }
                });

                document.getElementById('result').innerHTML = response.data;
                console.log('PlantUML SVG渲染成功');

            } catch (error) {
                console.error('PlantUML渲染失败:', error);
                document.getElementById('result').innerHTML = `<p style="color: red;">渲染失败: ${error.message}</p>`;
            }
        }

        // 页面加载时自动测试
        window.onload = testPlantUML;
    </script>
</body>
</html>
